<template>
  <view class="rich-details">
    <Header :title="getPageTitle" :is-box-shadow="false" />
    <view v-if="title" class="title">{{ title }}</view>
    <TRichText :content="content" />
  </view>
</template>

<script setup lang="ts">
  import Header from '@/components/Header/index.vue';
  import { computed, ref, unref } from 'vue';
  import { onLoad } from '@/router';
  import TRichText from '@/components/TRichText/index.vue';
  import { onShareAppMessage } from '@dcloudio/uni-app';
  import { clickRate, informationDetails } from '@/api/home';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { type InformationPageListResData } from '@/api/home/types';
  import { useAppShare } from '@/hooks/core/useAppShare';

  const { setWxSharePath } = useAppShare();
  const id = ref<string | number | undefined>(undefined);
  const title = ref<string>();
  const content = ref<string>();
  const pageTitle = ref<string>();

  const shareOp = ref();
  onLoad<'RichDetails'>(async (op) => {
    shareOp.value = op;
    id.value = op.id;
    pageTitle.value = op.pageTitle;
    if (!op.content && op.id) {
      getDetails();
    } else {
      title.value = op.title;
      content.value = op.content;
    }
    op.id && clickRate(op.id as number).then((r) => r === 1 && op.refresh?.());
  });

  const getPageTitle = computed(() => {
    let titleStr = pageTitle.value || title.value;
    let titleLength = titleStr?.length;
    if (titleLength && titleLength > 9) {
      titleStr = titleStr?.slice(0, 10) + '...';
    }
    return titleStr;
  });

  const details = ref<InformationPageListResData>();
  function getDetails() {
    /** 获取资讯详情 */
    id.value &&
      informationDetails(id.value).then((r) => {
        if (r) {
          details.value = r;
          title.value = r.title;
          content.value = r.details;
        }
      });
  }

  const { globalConfig } = useAppStoreWithOut();
  onShareAppMessage(() => ({
    imageUrl: unref(details) ? details.value?.coverUrl : globalConfig?.comShareOptions.shareImg,
    path: setWxSharePath({ name: 'richDetails', options: shareOp.value }),
    title: title.value || globalConfig?.comShareOptions.shareTitle,
  }));
</script>

<style lang="scss" scoped>
  .rich-details {
    padding: 10rpx 40rpx;
    min-height: 100vh;
    background-color: #fff;
    .title {
      font-weight: 600;
      font-size: 40rpx;
      text-align: center;
      margin: 40rpx 0;
    }
  }
</style>
